<template>
  <div class="mineSetting">
    <van-row class="header">
      <van-nav-bar
        class="header"
        :fixed='true'
      >
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" style="color:white"/>
        <span class="font" >&emsp;修改资料</span>

      </template>

      </van-nav-bar>
       </van-row>

       <van-row>
        <van-cell @click="$refs.updateImg.click()" clickable :border='true' size="large">
        <template #title>
          <span class="txt">我的信息</span>
        </template>
        <template #default>

        <img class="img" :src="theImg" alt="" ref="imgInfo"  @change="onFileChange">

  </template>
        </van-cell>
       </van-row>

       <van-row>
        <van-cell :value="theUname"  size="large" :clickable='true' @click.native="isUpdateUnameShow=true">
        <template #title>
          <span class="txt">昵称</span>
        </template>
        </van-cell>
       </van-row>

       <van-row>
        <van-cell @click="isUpdateGenderShow=true" :value="info.gender" :border='true' size="large"  clickable >
        <template #title>
          <span class="txt"  >性别</span>

        </template>
        </van-cell>
       </van-row>
       <!-- //设置性别 -->
        <van-popup v-model="isUpdateGenderShow" position="bottom">
             <div class="update-gender">
                <van-picker
                  show-toolbar
                  title="性别"
                  :columns="columns"
                  :default-index="sexValue"
                  @cancel="sexCancel"
                  @confirm="sexConfirm"
                  @change="onPickerChange"
                />
              </div>
          </van-popup>

       <van-row>
        <van-cell :value="info.birthday" :border='true' size="large" clickable>
        <template #title>
          <span class="txt">生日</span>
        </template>
        </van-cell>
       </van-row>

       <van-row>
        <van-cell :value="info.address" :border='true' size="large" clickable>
        <template #title>
          <span class="txt">所在地</span>
        </template>
        </van-cell>
       </van-row>

       <van-row>
        <van-cell :value="info.text" :border='true' size="large" clickable>
        <template #title>
          <span class="txt">签名</span>
        </template>
        </van-cell>
       </van-row>
<!-- 上传图片 -->
 <input type="file" name="" id="" hidden ref="updateImg" @change="onFileChange">
<!-- 修改图片 -->
 <van-popup v-model="isUpdatePhotoShow" position="bottom" style="height: 92%;"><UpdatePhote @close='isUpdatePhotoShow=false' :img='imgDate' @img='inputImg($event)'/></van-popup>
 <!-- 修改昵称 -->
 <van-popup v-model="isUpdateUnameShow" position="bottom" style="height: 50%;"><div class="update-name">
  <van-nav-bar class="uname" title="设置昵称" left-text="取消" right-text="完成" @click-left="onCancel"
  @click-right="onConfirm"/>

  <div class="field-wrap">
    <van-field
      v-model="info.uname"
      rows="2"
      autosize
      type="textarea"
      maxlength="7"
      placeholder="请输入昵称"
      show-word-limit
    />
  </div>
</div></van-popup>
  </div>
</template>

<script>
import { getInfo } from '@/api/hao'
// import img from '../../assets/hao/image/ljh.png'
import { Toast } from 'vant'
import UpdatePhote from './components/updatePhoto.vue'
import { mapMutations, mapGetters } from 'vuex'
export default {
    name: 'mineSetting',
    hello: 123,
    components: {
        UpdatePhote
    },
    data () {
        return {
            active: 1,
            sexValue: '男',
            columns: ['男', '女'],
            info: {
                uname: '',
                text: '',
                gender: '',
                birthday: '',
                address: ''
            },
            isUpdatePhotoShow: false,
            imgDate: '',
            // 修改昵称
            isUpdateUnameShow: false,
            // 修改性别
            isUpdateGenderShow: false
        }
    },
    sayHi() {
        console.log('Hello World');
    },
    created () {
        this.getInfo()
        this.$options.sayHi();
        // console.log(this.__proto__);
        // console.log(this.$options);
        // console.log(this.$options.__proto__);
        // console.dir(this.$options.constructor);
    },
    computed: {
        ...mapGetters(['theImg', 'theUname'])
    },
    mounted () {

    },
    methods: {
        ...mapMutations(['userInfo/changeImg', 'userInfo/updateUname']),
        async getInfo() {
            try {
                const res = await getInfo()
                this.info = res
                Toast.success('welcome')
            } catch (err) {
                Toast.fail('获取失败')
            }
        },
        onFileChange() {
            const file = this.$refs.updateImg.files[0]
            const data = window.URL.createObjectURL(file)
            console.log(data);
            this.imgDate = data
            this.isUpdatePhotoShow = true
        },
        inputImg(e) {
            // console.log(e);
            // this.img = e
            this['userInfo/changeImg'](e)
            // file-input 如果选了同一个文件不会触发 change 事件
            // 解决办法就是每次使用完毕，把它的 value 清空
            this.$refs.updateImg.value = ''
        },
        // 修改昵称
        onConfirm() {
            this.isUpdateUnameShow = false
            this.['userInfo/updateUname'](this.info.uname)
        },
        onCancel() {
            this.isUpdateUnameShow = false
        },
        sexCancel() {
            this.isUpdateGenderShow = false
        },
        sexConfirm() {
            this.isUpdateGenderShow = false
            this.info.gender = this.sexValue
        },
        onPickerChange(picker, value, index) {
            this.sexValue = value
        }
    }

}
</script>

<style scoped lang="scss">
/deep/.van-tab{
  width: 300px;
}
*{
  padding: 0;
  margin: 0;
}
.mineSetting{
  padding-top: 100px;
  box-sizing: border-box;
}
.header{
/deep/ .van-nav-bar__content{
  height: 100px;
  line-height: 100px;
  background-color:#6c6c6c ;
  .font,.van-icon{
    font-size: 36px;
    color: #fff;
  }

}
}

.uname{
  /deep/ .van-nav-bar__content{
  height: 100px;
  line-height: 100px;
  // background-color:#6c6c6c ;
  .van-nav-bar__text{
    font-size: 26px;
    color: #000;
  }
  .van-nav-bar__title{
    font-size: 32px;
  }
  .van-field__body{
    font-size: 36px;
  }

}
}
 /deep/ .van-cell{
  height: 100px;
  padding: 0 0px 0 30px;
  line-height: 100px;
  // background-color: #fff;
  }
  .van-cell__title{
    text-align: left;
    border-bottom: 1px solid rgba(204, 204, 204, 0.79);
    font-size: 30px;
    font-weight: 700;
  }
  .van-cell__value{
    border-bottom: 2px solid rgba(204, 204, 204, 0.79);
    font-size: 30px;
    padding-right: 30px;
  }
  .img{
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-left: 288px;
    margin-top: 16px;
  }

</style>
